<script lang="ts" setup>
import { reactive, onMounted, computed } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryProduct } from '@/api/term'
import { queryProductTableCol, supportDepositType } from '@/api/term/types/term'
import { getToken } from '@/utils/cache/cookies'
import { IncludedBatteryType } from '@/types/enum'
defineOptions({
  name: 'BSPList'
})

const form = reactive({
  storeId: '',
  name: ''
})

const { data, loading, load } = useTable<queryProductTableCol>(
  queryProduct,
  getToken() ?? '',
  () => form
)
const includeBattery = computed(() => {
  return (type: IncludedBatteryType) => {
    switch (type) {
      case IncludedBatteryType.No:
        return '不含电池'
      case IncludedBatteryType.Yes:
        return '含电池'
      default:
        break
    }
  }
})

const changeDepositType = computed(() => {
  return (depositTypes: supportDepositType[]) => {
    if (depositTypes.length > 0) {
      let name = ''
      depositTypes.forEach((v) => (name += `${v.name}\t`))
      return name
    }
  }
})
onMounted(() => {
  load()
})
</script>

<template>
  <div class="xy-container" v-loading="loading">
    <el-table :data="data" class="no-border">
      <el-table-column
        prop="includeBattery"
        sortable
        label="套餐类型"
        sort-by="includeBattery"
        align="center"
      >
        <template #default="scope">
          <span>{{ includeBattery(scope.row.includeBattery) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="inputVoltage"
        sortable
        sort-by="inputVoltage"
        label="电压类型"
        align="center"
      />
      <el-table-column
        prop="shortName"
        sortable
        sort-by="shortName"
        label="可选套餐"
        align="center"
      />
      <el-table-column prop="rent" label="套餐金额" align="center" />
      <el-table-column prop="originRent" label="原价" align="center" />
      <el-table-column prop="deposit" label="押金" align="center" />
      <el-table-column prop="" label="对应城市" align="center" />
      <el-table-column label="免押类型" align="center">
        <template #default="scope">
          <span>{{ changeDepositType(scope.row.supportDepositTypes) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="其他" align="center" />
    </el-table>
  </div>
</template>

<style scoped></style>
